<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>天气案例</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>今天天气很{{info}}</h2>
		<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
		<!-- <button @click="isHot = !isHot">切换天气</button> -->
		<button @click="changeWeather">切换天气</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			isHot: true,
		},
		// 计算属性 修改vm的isHot
		computed: {
			info() {
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather() {
				// !this.isHot 取反之后的isHot
				this.isHot = !this.isHot
			}
		},
	})
</script>

</html>